<template>
	<div
		class="w-full h-[50px] flex justify-center items-center"
		:class="isRuning || prohibit || isDisabled ? 'opacity-50' : ''">
		<div class="flex-1 h-full bg-[#131A27] rounded-[50px] flex p-[4px] flex-nowrap gap-[4px]">
			<div
				class="flex-1 flex h-full rounded-[50px] items-center justify-center cursor-pointer f-style"
				@click="changeMode('manual')"
				:class="type !== 'auto' ? 'bg-[#3E4C68]' : ''">
				{{ $t('miniGames.manual') }}
			</div>
			<div
				class="flex-1 flex h-full rounded-[50px] items-center justify-center cursor-pointer f-style"
				@click="changeMode('auto')"
				:class="type === 'auto' ? 'bg-[#3E4C68]' : ''">
				{{ $t('miniGames.auto') }}
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { watch, onMounted } from 'vue'
import { setGameCacheData, getGameCacheData } from '../../util'

const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: ''
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	prohibit: {
		type: Boolean,
		default: false
	},
	rocket: {
		type: Boolean,
		default: false
	},
	maxBet: {
		type: Boolean,
		default: false
	},
	mute: {
		type: Boolean,
		default: false
	},
	cache: {
		type: Boolean,
		default: true
	}
})

const emit = defineEmits(['changeMode'])
watch(
	() => props.type,
	(val: string) => {
		if (props.cache) {
			setGameCacheData({
				mode: val
			})
		}
	}
)
onMounted(() => {
	if (props.cache) {
		const gameCacheData = getGameCacheData()
		emit('changeMode', gameCacheData?.mode || 'manual')
	}
})
const changeMode = (val: string) => {
	if (props.isRuning || props.prohibit || props.isDisabled) {
		return
	}
	emit('changeMode', val)
}
</script>

<style scoped>
.f-style {
	font-size: 14px;
	font-weight: 600;
}
</style>
